<!--  商超组织-->
<template>
  <a-card>
    <div class='table-page-search-wrapper'>
      <search ref='search' :config='searchConfig' @search='search' @getHeight='getHeight' />
    </div>
    <!-- 操作按钮区域 -->
    <div class='table-operator'>
      <a-button @click="handleAdd('newAdd')" type='primary' icon='plus'>新增</a-button>
      <a-button type="primary" @click='batchDel'>删除</a-button>
      <a-button type="primary" @click="stateChange('009')">启用</a-button>
      <a-button type="primary" @click="stateChange('003')">禁用</a-button>
      <a-button type='primary' icon='download' @click="downExportXls('cnSysSuper_service')">导出</a-button>
    </div>
    <div class='totalView'>
      <!--      左-->
      <div class='left'>
        <head class='left-header'>
          <span></span>
          <span class='left-header-text'>商超系统</span>
          <span></span>
        </head>
        <a-input-search v-model='searchOn.superName' style='margin-bottom: 8px' placeholder='请输入商超名称' enter-button
                        @search='onSearchs' />
        <a-tree
          :auto-expand-parent='autoExpandParent'
          :tree-data='treeData'
          @expand='onExpand'
          :checkedKeys='checkedKeys'
          :checkStrictly='true'
          :replaceFields="{children: 'children', title: 'superName', key: 'superCode'}"
          style='width:100%;border: 0px;border: none;outline:none;'
          @select='selectNode'
        >
        </a-tree>
      </div>
      <!--      右-->
      <div class='right'>
        <!-- table区域-begin -->
        <div class='table-width'>
          <a-table
            ref='table'
            size='middle'
            bordered
            rowKey='id'
            :scroll='{x:2000,y:pageHeight-seachHeight-220}'
            :columns='columns'
            :dataSource='dataSource'
            :pagination='ipagination'
            :loading='loading'
            :customRow='onClickRow'
            :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
            @change='handleTableChange'>

            <div slot='productName' slot-scope='text,record'>
              <a @click="handleButon('detail',record)">{{ text }}</a>
            </div>

            <div slot='filterDropdown'>
              <a-card>
                <a-checkbox-group @change='onColSettingsChange' v-model='settingColumns' :defaultValue='settingColumns'>
                  <a-row>
                    <template v-for='(item,index) in defColumns'>
                      <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                        <a-col :span='12'>
                          <a-checkbox :value='item.dataIndex'>{{ item.title }}</a-checkbox>
                        </a-col>
                      </template>
                    </template>
                  </a-row>
                </a-checkbox-group>
              </a-card>
            </div>
            <span slot='action' slot-scope='text, record'>
          <a @click='handleEdit(record)'>编辑</a>
        </span>
          </a-table>
        </div>
      </div>
    </div>
    <tmrKaOrgModal ref='modalForm' @ok='modalFormOk'></tmrKaOrgModal>
  </a-card>
</template>

<script>
import { getAction, postAction,deleteAction } from '@/api/manage'
import { PageListMixin } from '@/mixins/PageListMixin'
import tmrKaOrgModal from '@/views/tmr/tmrMdm/modules/tmrKaOrgModal'

import Vue from 'vue'
export default {
  name: 'tmrKaOrg',
  description: '商超管理页面',
  mixins: [PageListMixin],
  components: {
    tmrKaOrgModal,

  },
  data() {
    return {
      dataSource:[{
        orgCode:'4444'
      }],

      checkedKeys: [],
      treeData: [],
      autoExpandParent: false,
      queryParam: {},
      //列设置
      settingColumns: [],
      // 列定义
      defColumns: [
        {
          title: '商超系统名称',
          align: 'left',
          dataIndex: 'superName',
          fixed: 'left',
          width: 150,
          scopedSlots: { customRender: 'superName' }
        },
        // {
        //   title: '#',
        //   dataIndex: '',
        //   key: 'rowIndex',
        //   width: 60,
        //   align: 'center',
        //   customRender: function(t, r, index) {
        //     return parseInt(index) + 1
        //   }
        // },
        {
          title: '商超系统编码',
          align: 'left',
          dataIndex: 'superCode'
        },

        {
          title: '系统层级',
          align: 'left',
          dataIndex: 'superLevelStr'
        },
        {
          title: '上级商超系统',
          align: 'left',
          dataIndex: 'parentName'
        },

        {
          title: '商超系统描述',
          align: 'left',
          dataIndex: 'superTypeStr'
        },

        {
          title: '备注',
          align: 'left',
          dataIndex: 'remarks'
        },
        {
          title: '状态',
          align: 'left',
          dataIndex: 'status_dictText'
        },
        {
          title: '创建人',
          align: 'left',
          dataIndex: 'createName'
        },
        {
          title: '创建时间',
          align: 'left',
          dataIndex: 'createDate',
          customRender: (t, r, dex) => {
            return r.createDate + ' ' + r.createDateTime
          }
        },

        {
          title: '更新人',
          align: 'left',
          dataIndex: 'updateName'
        },
        {
          title: '最近更新时间',
          align: 'left',
          dataIndex: 'updateDate',
          customRender: (t, r) => {
            if (r.updateDate == null || r.updateDateTime == null) {
              return ' '
            } else {
              return r.updateDate + ' ' + r.updateDateTime
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
          align: 'center',
          width: 150,
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            // filterIcon: 'filterIcon',
            customRender: 'action'
          }
        }
      ],
      //表头
      columns: [],
      url: {
        list: window._CONFIG['domianURL'] + '/cnSysSuper/getPageList',
        deleteBatch: window._CONFIG['domianURL'] + '/cnSysSuper/deleteBatch',
        startOrStopUrl: window._CONFIG['domianURL'] + '/cnSysSuper/startOrStop',
        treeList: window._CONFIG['domianURL'] + '/cnSysSuper/getSuperTypeTree',
        status: window._CONFIG['domianURL'] + '/cnSysSuper/startOrStop',
        detail: window._CONFIG['domianURL'] + '/cnSysSuper/getInfo',

      },
      searchConfig: [
        {
          type: 'input',
          name: 'superCode',
          placeholder: '请输入商超系统编码'
        },
        {
          type: 'input',
          name: 'superName',
          placeholder: '请输入商超系统名称'
        },
        // {
        //   // label:'下单时间',
        //   type:'date',
        //   name:'orderDate',
        //   placeholder:'下单时间',
        //   toggleSearchStatus:true
        //
        // },
      ]
    }
  },
  methods: {
    batchDel: function () {
      if (!this.url.deleteBatch) {
        this.$message.error("请设置url.deleteBatch属性!")
        return
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！');
        return;
      } else {
        var ids = "";
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ",";
        }
        var that = this;
        this.$confirm({
          title: "确认删除",
          content: `已选中${this.selectedRowKeys.length}条,是否删除选中数据?`,
          onOk: function () {
            that.loading = true;
            deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.loadData();
                that.loadTreeData();
                that.onClearSelected();
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.loading = false;
            });
          }
        });
      }
    },
    async modalFormOk() {
      // 新增/修改 成功时，重载列表
      await this.loadData();
      await this.loadTreeData();
      this.$refs.modalForm.close();

    },
    selectNode(e, e2) {
      console.log(e)
      this.loading = true
      postAction(this.url.list,{ superCode:e[0]}).then(res => {
        if (!res.success) {
          this.$message.error(res.message)
          return
        }

        this.dataSource = res.result.records
      }).finally(()=>{
        this.loading = false
      })
    },
    onExpand(leafKey) {
      console.log(leafKey)
    },
    // 加载树数据
    loadTreeData(arg) {
      if (!this.url.treeList) {
        this.$message.info('请配置树状接口地址')
      }
      postAction(this.url.treeList).then(res => {
        console.log(res.result)
        this.treeData = [...res.result]
      })
    },
    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ':colsettings'
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues
      const cols = this.defColumns.filter(item => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      var key = this.$route.name + ':colsettings'
      let colSettings = Vue.ls.get(key)
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = []
        this.defColumns.forEach(function(item, i, array) {
          allSettingColumns.push(item.dataIndex)
        })
        this.settingColumns = allSettingColumns
        this.columns = this.defColumns
      } else {
        this.settingColumns = colSettings
        const cols = this.defColumns.filter(item => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true
          }
          if (colSettings.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        this.columns = cols
      }
    }
  },
  created() {
    this.initColumns(),
      this.loadTreeData()
  },
  computed: {}
}
</script>

<style scoped lang='less'>
@import '~@assets/less/common.less';

.totalView {
  margin-top: 8px;
  display: flex;
  flex-direction: row;

  .left {
    border: 1px solid #edeff0;
    min-width: 300px;
    padding: 2px;

    .left-header {
      display: flex;
      justify-content: space-around;

      .left-header-text {
        padding: 5px 0 5px 0;
        width: 100%;
        text-align: center;
        font-size: 18px;
        margin-bottom: 26px;

        background-color: #edeff0;
      }
    }

  }


  .right {
    width: 100%;

    .table-width {
      max-width: calc(100% - 300px);
      overflow: auto;
    }

  }
}

.table-page-search-wrapper {

  padding-bottom: 5px;

}

.table-operator {

}
</style>